<template>
  <div id="left" class="multiple-item-bg">
    <!-- 建筑业总览 -->
    <div class="grid-item">
      <!-- 标题 -->
      <div class="title">
        <span>建筑业总览</span>
      </div>
      <div style="height: 1rem;">
        <!-- 建筑业总产值 -->
        <div style="position: relative;left: 2rem;top: 4.4rem;height: 9.38rem;width: 19.46rem;">
          <img src="../../assets/left/bg_border.png" />
          <!-- 刻度 -->
          <div style="width: 5rem;height: 5rem;position: relative;top: -5.5rem;left: 2rem;">
            <rule :number="jzy_jzyzcz_je_bind" />
          </div>
          <span class="border-title">建筑业总产值</span>
          <span class="border-number building color">{{jzy_jzyzcz_je}}</span>
          <span class="border-unit">万元</span>
          <span
            class="border-tb"
            :style="jzy_jzyzcz_tb >= 0 ? 'color: #FF4965;' : 'color: #44C787;'"
          >
            同比
            <span
              style="padding-left: 1rem;float: right;"
              v-if="jzy_jzyzcz_tb >= 0"
            >↑ {{jzy_jzyzcz_tb}}%</span>
            <span style="padding-left: 1rem;float: right;" v-else>↓ {{-jzy_jzyzcz_tb}}%</span>
          </span>
        </div>
        <!-- 建筑业合同总额 -->
        <div style="position: relative;left: 25rem;top: -5rem;height: 9.38rem;width: 19.46rem;">
          <img src="../../assets/left/bg_border.png" />
          <!-- 刻度 -->
          <div style="width: 5rem;height: 5rem;position: relative;top: -5.5rem;left: 2rem;">
            <rule :number="jzy_jzyhtje_je_bind" />
          </div>
          <span class="border-title">建筑业合同总额</span>
          <span class="border-number building color">{{jzy_jzyhtje_je}}</span>
          <span class="border-unit">万元</span>
          <span
            class="border-tb"
            :style="jzy_jzyhtje_tb >= 0 ? 'color: #FF4965;' : 'color: #44C787;'"
          >
            同比
            <span
              style="padding-left: 1rem;float: right;"
              v-if="jzy_jzyhtje_tb >= 0"
            >↑ {{jzy_jzyhtje_tb}}%</span>
            <span style="padding-left: 1rem;float: right;" v-else>↓ {{-jzy_jzyhtje_tb}}%</span>
          </span>
        </div>
        <!-- 房屋建筑施工面积 -->
        <div style="position: relative;left: 2rem;top: -3.6rem;height: 9.38rem;width: 19.46rem;">
          <img src="../../assets/left/bg_border.png" />
          <!-- 刻度 -->
          <div style="width: 5rem;height: 5rem;position: relative;top: -5.5rem;left: 2rem;">
            <rule :number="jzy_fwjzsgmj_je_bind" />
          </div>
          <span class="border-title">房屋建筑施工面积</span>
          <span class="border-number building color">{{jzy_fwjzsgmj_je}}</span>
          <span class="border-unit">km²</span>
          <span
            class="border-tb"
            :style="jzy_fwjzsgmj_tb >= 0 ? 'color: #FF4965;' : 'color: #44C787;'"
          >
            同比
            <span
              style="padding-left: 1rem;float: right;"
              v-if="jzy_fwjzsgmj_tb >= 0"
            >↑ {{jzy_fwjzsgmj_tb}}%</span>
            <span style="padding-left: 1rem;float: right;" v-else>↓ {{-jzy_fwjzsgmj_tb}}%</span>
          </span>
        </div>
        <!-- 房屋建筑新开工面积 -->
        <div style="position: relative;left: 25rem;top: -13rem;height: 9.38rem;width: 19.46rem;">
          <img src="../../assets/left/bg_border.png" />
          <!-- 刻度 -->
          <div style="width: 5rem;height: 5rem;position: relative;top: -5.5rem;left: 2rem;">
            <rule :number="jzy_fwjzxkgmj_je_bind" />
          </div>
          <span class="border-title">房屋建筑新开工面积</span>
          <span class="border-number building color">{{jzy_fwjzxkgmj_je}}</span>
          <span class="border-unit">km²</span>
          <span
            class="border-tb"
            :style="jzy_fwjzxkgmj_tb >= 0 ? 'color: #FF4965;' : 'color: #44C787;'"
          >
            同比
            <span
              style="padding-left: 1rem;float: right;"
              v-if="jzy_fwjzxkgmj_tb >= 0"
            >↑ {{jzy_fwjzxkgmj_tb}}%</span>
            <span style="padding-left: 1rem;float: right;" v-else>↓ {{-jzy_fwjzxkgmj_tb}}%</span>
          </span>
        </div>
        <!-- 建筑业上交税金 -->
        <div style="position: relative;left: 2rem;top: -11rem;height: 9.38rem;width: 19.46rem;">
          <img src="../../assets/left/bg_border.png" />
          <!-- 刻度 -->
          <div style="width: 5rem;height: 5rem;position: relative;top: -5.5rem;left: 2rem;">
            <rule :number="jzy_jzysjsj_je_bind" />
          </div>
          <span class="border-title">建筑业上交税金</span>
          <span class="border-number building color">{{jzy_jzysjsj_je}}</span>
          <span class="border-unit">万元</span>
          <span
            class="border-tb"
            :style="jzy_jzysjsj_tb >= 0 ? 'color: #FF4965;' : 'color: #44C787;'"
          >
            同比
            <span
              style="padding-left: 1rem;float: right;"
              v-if="jzy_jzysjsj_tb >= 0"
            >↑ {{jzy_jzysjsj_tb}}%</span>
            <span style="padding-left: 1rem;float: right;" v-else>↓ {{-jzy_jzysjsj_tb}}%</span>
          </span>
        </div>
        <!-- 建筑业利润总额 -->
        <div style="position: relative;left: 25rem;top: -20.5rem;height: 9.38rem;width: 19.46rem;">
          <img src="../../assets/left/bg_border.png" />
          <!-- 刻度 -->
          <div style="width: 5rem;height: 5rem;position: relative;top: -5.5rem;left: 2rem;">
            <rule :number="jzy_jzylrze_je_bind" />
          </div>
          <span class="border-title">建筑业利润总额</span>
          <span class="border-number building color">{{jzy_jzylrze_je}}</span>
          <span class="border-unit">万元</span>
          <span
            class="border-tb"
            :style="jzy_jzylrze_tb >= 0 ? 'color: #FF4965;' : 'color: #44C787;'"
          >
            同比
            <span
              style="padding-left: 1rem;float: right;"
              v-if="jzy_jzylrze_tb >= 0"
            >↑ {{jzy_jzylrze_tb}}%</span>
            <span style="padding-left: 1rem;float: right;" v-else>↓ {{-jzy_jzylrze_tb}}%</span>
          </span>
        </div>
      </div>
    </div>

    <!-- 建筑业企业及人员 -->
    <div class="grid-item">
      <!-- 标题 -->
      <div class="title">
        <span>建筑业企业及人员</span>
      </div>
      <div>
        <!-- 企业总数边框样式 -->
        <div class="border-x-style">
          <div class="border-y-style">
            <img
              src="../../assets/left/total_enterprises.png"
              style="margin: 0.7rem 0.5rem 0rem 1.5rem;"
            />
            <span class="title-enterprises">企业总数</span>
            <span class="number-enterprises">{{jzy_jzyqyzs}}</span>
            <span class="text-enterprises">家</span>
          </div>
        </div>
        <!-- 勘查设计 -->
        <div style="position: relative;left: 18rem;top: -11.5rem;height: 5.5rem;">
          <span class="title-progress">勘查设计</span>
          <!-- 进度条 -->
          <div class="div-progress1"></div>
          <div
            ref="progress"
            class="div-progress2"
            :style="{'width': (jzy_kcsj/jzy_max)*13.8 + 'rem'}"
          ></div>
          <div class="number-progress">{{jzy_kcsj}}</div>
          <span class="text-progress">家</span>
        </div>
        <!-- 施工企业 -->
        <div style="position: relative;left: 18rem;top: -14.5rem;height: 5.5rem;">
          <span class="title-progress">施工企业</span>
          <!-- 进度条 -->
          <div class="div-progress1"></div>
          <div class="div-progress2" :style="{'width': (jzy_sgqy/jzy_max)*13.8 + 'rem'}"></div>
          <div class="number-progress">{{jzy_sgqy}}</div>
          <span class="text-progress">家</span>
        </div>
        <!-- 图审机构 -->
        <div style="position: relative;left: 18rem;top: -17.5rem;height: 5.5rem;">
          <span class="title-progress">图审机构</span>
          <!-- 进度条 -->
          <div class="div-progress1"></div>
          <div class="div-progress2" :style="{'width': (jzy_tsjg/jzy_max)*13.8 + 'rem'}"></div>
          <div class="number-progress">{{jzy_tsjg}}</div>
          <span class="text-progress">家</span>
        </div>
        <!-- 监理企业 -->
        <div style="position: relative;left: 18rem;top: -20.5rem;height: 5.5rem;">
          <span class="title-progress">监理企业</span>
          <!-- 进度条 -->
          <div class="div-progress1"></div>
          <div class="div-progress2" :style="{'width': (jzy_jlqy/jzy_max)*13.8 + 'rem'}"></div>
          <div class="number-progress">{{jzy_jlqy}}</div>
          <span class="text-progress">家</span>
        </div>
        <!-- 三个数据展示框 -->
        <div style="position: relative;left: 2rem;top: -22rem;">
          <!-- 建筑业从业人员 (人) -->
          <div class="bg-style">
            <span class="number-person" style="left: 1rem;top: 1.5rem;">{{jzy_jzycyry_rs}}</span>
            <span
              style="float: right;margin: 1.8rem 0.5rem 0rem 0rem;font-family: PingFangSC-Regular;font-size: 13px;color: #FF4965;letter-spacing: 0.3px;"
              v-if="jzy_jzycyry_tb >= 0"
            >↑ {{jzy_jzycyry_tb}}%</span>
            <span
              style="float: right;margin: 1.8rem 0.5rem 0rem 0rem;font-family: PingFangSC-Regular;font-size: 13px;color: #44C787;;letter-spacing: 0.3px;"
              v-else
            >↓ {{-jzy_jzycyry_tb}}%</span>
            <span class="text-person" style="top: 0.5rem;left: 1rem;">建筑业从业人员（人）</span>
          </div>
          <!-- 注册人员(人) -->
          <div class="bg-style" style="text-align: center;">
            <span class="number-person">{{jzy_zcry_rs}}</span>
            <br />
            <span class="text-person">注册人员（人）</span>
          </div>
          <!-- 现场人员(人) -->
          <div class="bg-style" style="text-align: center;">
            <span class="number-person">{{jzy_xcry_rs}}</span>
            <br />
            <span class="text-person">现场人员(人)</span>
          </div>
        </div>
        <!-- bottom数据 -->
        <div style="position: relative;top: -14rem;left: 2rem;">
          <!-- 左侧 -->
          <div class="div-bottom" style="border-right: 1px solid rgba(255,255,255,0.20);">
            <div style="margin-left: 2rem;">
              <div class="title-bottom">
                房建、市政类工程
                <br />消防设计审查
              </div>
              <div class="number-bottom">{{jzy_xfsjsc}}</div>
              <div class="text-bottom">件</div>
              <div style="clear:both"></div>
              <div class="title-bottom">其它类消费设计审查</div>
              <div class="number-bottom">{{jzy_qtlxfsjsc}}</div>
              <div class="text-bottom">件</div>
              <div class="thirdItemContent">
                <div class="color-div-base blue-div" :style="{'height':colorDivCss.blue + 'rem'}"></div>
                <div class="color-div-base green-div" :style="{'height':colorDivCss.green + 'rem'}"></div>
              </div>
            </div>
          </div>
          <!-- 右侧 -->
          <div class="div-bottom">
            <div style="margin-left: 2rem;">
              <div class="title-bottom">
                房建、市政类工程
                <br />消防验收备案
              </div>
              <div class="number-bottom">{{jzy_xfysba}}</div>
              <div class="text-bottom">件</div>
              <div style="clear:both"></div>
              <div class="title-bottom">其它29类建设工程</div>
              <div class="number-bottom">{{jzy_qtljzgc}}</div>
              <div class="text-bottom">件</div>
              <div class="thirdItemContent">
                <div
                  class="color-div-base yellow-div"
                  :style="{'height':colorDivCss.yellow + 'rem'}"
                ></div>
                <div class="color-div-base red-div" :style="{'height':colorDivCss.red + 'rem'}"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import rule from "../../components/homePage/rule";
export default {
  components: {
    rule
  },
  data() {
    return {
      // 建筑业总产值
      jzy_jzyzcz_je: 0,
      jzy_jzyzcz_je_bind: 0,
      // 建筑业总产值同比
      jzy_jzyzcz_tb: 0,
      // 建筑业合同金额
      jzy_jzyhtje_je: 0,
      jzy_jzyhtje_je_bind: 0,
      // 建筑业合同金额同比
      jzy_jzyhtje_tb: 0,
      // 房屋建筑施工面积
      jzy_fwjzsgmj_je: 0,
      jzy_fwjzsgmj_je_bind: 0,
      // 房屋建筑施工面积同比
      jzy_fwjzsgmj_tb: 0,
      // 房屋建筑新开工面积
      jzy_fwjzxkgmj_je: 0,
      jzy_fwjzxkgmj_je_bind: 0,
      // 房屋建筑新开工面积同比
      jzy_fwjzxkgmj_tb: 0,
      // 建筑业上交税金
      jzy_jzysjsj_je: 0,
      jzy_jzysjsj_je_bind: 0,
      // 建筑业上交税金同比
      jzy_jzysjsj_tb: 0,
      // 建筑业利润总额
      jzy_jzylrze_je: 0,
      jzy_jzylrze_je_bind: 0,
      // 建筑业利润总额同比
      jzy_jzylrze_tb: 0,
      // 企业总数
      jzy_jzyqyzs: 0,
      // 建筑业从业人员(人)
      jzy_jzycyry_rs: 0,
      // 建筑业从业人员同比
      jzy_jzycyry_tb: 0,
      // 注册人员(人)
      jzy_zcry_rs: "",
      // 现场人员(人)
      jzy_xcry_rs: "",
      // 勘察设计(家)
      jzy_kcsj: "",
      // 施工企业(家)
      jzy_sgqy: "",
      // 图审机构(家)
      jzy_tsjg: "",
      // 监理企业(家)
      jzy_jlqy: "",
      // 最大值(控制进度条宽度)
      jzy_max: "",
      // 房建、市政类工程消防设计审查（件）
      jzy_xfsjsc: "",
      // 其他类消防设计审查（件）
      jzy_qtlxfsjsc: "",
      // 房建、市政类工程消防验收备案（件）
      jzy_xfysba: "",
      // 其他类建筑工程（件）
      jzy_qtljzgc: "",
      //控制建筑业企业及人员的柱状图形的高度
      colorDivCss: {
        blue: 15,
        red: 15,
        yellow: 15,
        green: 15
      }
    };
  },
  mounted() {
    this.initData();
  },

  methods: {
    initData() {
      let vm = this;
      let param1 = { path: "ov", groupid: 1 };
      vm.http({ url: "", method: "post", params: param1 }).then(res => {
        vm.oldValueToNewValue(
          Math.round(res.data.jzy_jzyzcz_je),
          "jzy_jzyzcz_je"
        );
        vm.oldValueToNewValue(
          Math.round(res.data.jzy_jzyhtje_je),
          "jzy_jzyhtje_je"
        );
        vm.oldValueToNewValue(
          Math.round(res.data.jzy_fwjzsgmj_je),
          "jzy_fwjzsgmj_je"
        );
        vm.oldValueToNewValue(
          Math.round(res.data.jzy_fwjzxkgmj_je),
          "jzy_fwjzxkgmj_je"
        );
        vm.oldValueToNewValue(
          Math.round(res.data.jzy_jzysjsj_je),
          "jzy_jzysjsj_je"
        );
        vm.oldValueToNewValue(
          Math.round(res.data.jzy_jzylrze_je),
          "jzy_jzylrze_je"
        );

        vm.jzy_jzyzcz_je_bind = res.data.jzy_jzyzcz_je;
        vm.jzy_jzyhtje_je_bind = res.data.jzy_jzyhtje_je;
        vm.jzy_fwjzsgmj_je_bind = res.data.jzy_fwjzsgmj_je;
        vm.jzy_fwjzxkgmj_je_bind = res.data.jzy_fwjzxkgmj_je;
        vm.jzy_jzysjsj_je_bind = res.data.jzy_jzysjsj_je;
        vm.jzy_jzylrze_je_bind = res.data.jzy_jzylrze_je;

        vm.jzy_jzyzcz_tb = res.data.jzy_jzyzcz_tb;
        vm.jzy_jzyhtje_tb = res.data.jzy_jzyhtje_tb;
        vm.jzy_fwjzsgmj_tb = res.data.jzy_fwjzsgmj_tb;
        vm.jzy_fwjzxkgmj_tb = res.data.jzy_fwjzxkgmj_tb;
        vm.jzy_jzysjsj_tb = res.data.jzy_jzysjsj_tb;
        vm.jzy_jzylrze_tb = res.data.jzy_jzylrze_tb;
      });

      let param2 = { path: "ov", groupid: 2 };
      vm.http({ url: "", method: "post", params: param2 }).then(res => {
        vm.jzy_jzyqyzs = res.data.jzy_jzyqyzs;
        vm.jzy_jzycyry_rs = res.data.jzy_jzycyry_rs;
        vm.jzy_jzycyry_tb = res.data.jzy_jzycyry_tb;
        vm.jzy_zcry_rs = res.data.jzy_zcry_rs;
        vm.jzy_xcry_rs = res.data.jzy_xcry_rs;
        vm.jzy_kcsj = res.data.jzy_kcsj;
        vm.jzy_sgqy = res.data.jzy_sgqy;
        vm.jzy_tsjg = res.data.jzy_tsjg;
        vm.jzy_jlqy = res.data.jzy_jlqy;
        vm.jzy_xfsjsc = res.data.jzy_xfsjsc;
        vm.jzy_qtlxfsjsc = res.data.jzy_qtlxfsjsc;
        vm.jzy_xfysba = res.data.jzy_xfysba;
        vm.jzy_qtljzgc = res.data.jzy_qtljzgc;
        vm.jzy_max = Math.max(
          vm.jzy_kcsj,
          vm.jzy_sgqy,
          vm.jzy_tsjg,
          vm.jzy_jlqy
        );
        if (vm.jzy_xfsjsc > vm.jzy_qtlxfsjsc) {
          vm.colorDivCss.green = (15 * vm.jzy_qtlxfsjsc) / vm.jzy_xfsjsc;
        } else {
          vm.colorDivCss.blue = (15 * vm.jzy_xfsjsc) / vm.jzy_qtlxfsjsc;
        }
        if (vm.jzy_xfysba > vm.jzy_qtljzgc) {
          vm.colorDivCss.red = (15 * vm.jzy_qtljzgc) / vm.jzy_xfysba;
        } else {
          vm.colorDivCss.yellow = (15 * vm.jzy_xfysba) / vm.jzy_qtljzgc;
        }
      });
    },
    // 显示大屏数字变化过程 value为变化后的数字 tag为字段名称
    oldValueToNewValue(value, tag) {
      let isAdd = true;
      let newValue = value;
      // 获取要变化的data数据
      let oldValue = this[tag];
      if (newValue > oldValue) {
        isAdd = true;
      } else if (newValue < oldValue) {
        isAdd = false;
      } else {
        return;
      }
      let _this = this;
      let i = 0;
      // 开启定时变化
      let timeId = setInterval(function() {
        let data = _this[tag];
        i++;
        if (isAdd) {
          data += Math.pow(2, i);
          if (data >= value) {
            _this[tag] = value;
            clearInterval(timeId);
          } else {
            _this[tag] = data;
          }
        } else {
          data -= Math.pow(2, i);
          if (data <= value) {
            _this[tag] = value;
            clearInterval(timeId);
          } else {
            _this[tag] = data;
          }
        }
      }, 100);
    }
  }
};
</script>

<style lang="scss" >
@import "../../assets/scss/building/left.scss";
</style>
